<template>
   <div class="login">
    <img src="@/assets/img/d.jpg" alt="" class="bjimg">
    <div class="loginTop">
      <img src="@/assets/img/cd.png" alt="">
    </div> 
    <div class="loginContent">
        <input type="text" name="phone" class="phone" v-model="phone" placeholder="请输入手机号"/>
        <input type="password" class="password" name="password" v-model="password" placeholder="请输入密码"/>
        <button class="btn" @click="Login">登录</button>
    </div>
   </div>
</template>

<script>
import { getLoginUser } from '@/request/api/home.js'
export default {
    data(){
        return{
            phone:'',
            password:''
        }
    },
    methods:{
        //登录事件
        Login:async function(){
          let res  = await this.$store.dispatch('getLogin', {phone:this.phone, password: this.password})
          //console.log(res)
          //如果返回的code等于200，则登录成功，就跳转个人中心页面
          if(res.data.code ===200){
            this.$store.commit('updateIsLogin', true);
            this.$store.commit('updateToken',res.data.token);

            //获取用户信息
            let result = await getLoginUser(res.data.account.id)

            //把获取到的信息提交过去
            this.$store.commit('updateUser',result)
            console.log(result)


            this.$router.push('/infoUser');
          }else{
           this.$toast('手机号码或密码错误');
            this.phone = '' //清空手机号码
            this.password='' //清空密码
          }
        }
    }
}
</script>
<style lang="less" scoped>
.bjimg{
  width: 100%;
  height: 100%;
  /** */
  position: absolute;
   /** 虚化背景图 */
  filter:blur(70px);
  z-index: -1;
}
.login{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .loginTop{
    width: 100%;
    height: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 3rem ;
    img{
      width: 1.5rem;
      height:1.5rem;
    }
  }
  /** 登录 input 表单 */
 .loginContent{
  width: 100%;
  height:50% ;
  display: flex;
  flex-direction: column;
  input{
    border: 0;
    background:rgba(255, 255, 255, 0.5) ;
    width: 60%;
    height: 1rem;
    margin: 0.3rem auto;
    padding-left:0.3rem ;
    border-radius:5px;
  }
  button{
    width: 60%;
    height: 1rem;
    margin: 0.3rem auto;
    background-color:rgb(111, 150, 233) ;
    border: 0;
    color: #fff;
    border-radius:5px;
  }
 }
}
</style>